<template>
    <div class="layout" v-loading="loading">
        <div class="white-block">
            <div class="mb10">资源列表</div>
            <div class="res-filters">
                <div class="item">
                    <div class="label">归集情况</div>
                    <div class="content">
                        <el-link :type="filterActive(resFilters.isOnline,item)" :underline="false"
                                 v-for="item in resFilters.OnlineList" :key="item.id"
                                 @click="filterClick(resFilters,'isOnline',item)">
                            {{item.label}}
                            <!--                            {{item.label+'('+item.value+')'}}-->
                        </el-link>
                    </div>
                </div>
                <div class="item">
                    <div class="label">资源分类</div>
                    <div class="content">
                        <el-link :type="filterActive(resFilters.resType,0)" :underline="false"
                                 @click="filterClick(resFilters,'id',0,'resType')" class="all">
                            全部
                        </el-link>
                        <div class="list">
                            <el-link :type="filterActive(resFilters.resType,item)" :underline="false"
                                     v-for="item in resFilters.resTypeList" :key="item.id"
                                     @click="filterClick(resFilters,'resType',item)">
                                {{item.label}}
                                <!--                                {{item.label+'('+item.value+')'}}-->
                            </el-link>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="label">资源层级</div>
                    <div class="content">
                        <el-link :type="filterActive(resFilters.resLevel,0)" :underline="false"
                                 @click="filterClick(resFilters,'id',0,'resLevel')" class="all">
                            全部
                        </el-link>
                        <div class="list">
                            <el-link :type="filterActive(resFilters.resLevel,item)" :underline="false"
                                     v-for="item in resFilters.resLevelList" :key="item.id"
                                     @click="filterClick(resFilters,'resLevel',item)">
                                {{item.label}}
                                <!--                                {{item.label+'('+item.value+')'}}-->
                            </el-link>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="label">资源权限</div>
                    <div class="content">
                        <el-link :type="filterActive(resFilters.resPower,0)" :underline="false"
                                 @click="filterClick(resFilters,'id',0,'resPower')" class="all">
                            全部
                        </el-link>
                        <div class="list">
                            <el-link :type="filterActive(resFilters.resPower,item)" :underline="false"
                                     v-for="item in resFilters.resPowerList" :key="item.id"
                                     @click="filterClick(resFilters,'resPower',item)">
                                {{item.label}}
                                <!--                                {{item.label+'('+item.value+')'}}-->
                            </el-link>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="label">资源权限部门</div>
                    <div class="content">
                        <el-link :type="filterActive(resFilters.resPowerDept,0)" :underline="false"
                                 @click="filterClick(resFilters,'id',0,'resPowerDept')" class="all">
                            全部
                        </el-link>
                        <div class="list" ref="resPowerDept" :class="{simple: showMore}">
                            <el-link :type="filterActive(resFilters.resPowerDept,item)" :underline="false"
                                     v-for="item in resFilters.resPowerDeptList" :key="item.id"
                                     @click="filterClick(resFilters,'resPowerDept',item)">
                                {{item.label||item.dept}}
                                <!--                                {{item.label||item.dept +'('+ (item.value||item.size) +')'}}-->
                            </el-link>
                            <el-link :underline="false" class="more" @click="more=!more" v-if="showMore">
                                <span v-if="more">更多<i class="el-icon-arrow-down"></i></span>
                                <span v-else>收起<i class="el-icon-arrow-up"></i></span>
                            </el-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="toolbar mt20">
            <div>
                <el-button type="primary" size="small" @click="downLoad">资源列表下载</el-button>
            </div>
            <div class="text-right">
                <el-input v-model="resFilters.resName" placeholder="" class="input mr10" size="small"></el-input>
                <el-button size="small" @click="getList(1)">查询</el-button>
            </div>
        </div>
        <div class="list mt10 white-block">
            <el-row class="res-list" v-for="list in tableData" :key="list.id">
                <el-col :span="18" class="info">
                    <div class="title">
                        <span class="name ellipsis"
                              @click="$router.push('/res/detail/'+list.id)">{{list.resName}}</span>
                        <el-button class="minor limit ml10 text" size="mini" v-if="list.collectionSituation!=2">
                            {{list.resType==1?'服务接口类':(list.resType==2?'服务页面类':'数据交换类')}}
                        </el-button>
                        <el-button class="minor limit ml10 text" size="mini" v-else>
                            未归集
                        </el-button>
                    </div>
                    <div class="mt20">
                        <span class="mr20">{{list.resPower==1?'公开':'受限'}}</span>
                        <span class="mr20">{{list.resSourceDept}}</span>
                        <span>更新时间：{{list.modifyTime}}</span>
                    </div>
                </el-col>
                <el-col :span="6" class="text-right">
                    <el-button size="small" @click="addCart(list)"
                               v-if="list.collectionSituation==1 && $routeNav.getAuth('power-addCart')">加入申请栏
                    </el-button>
                    <el-button type="primary" size="small" @click="submit(list,list.collectionSituation==2)"
                               v-if="list.collectionSituation==1 && $routeNav.getAuth('power-zysq')">
                        立即申请
                    </el-button>
                    <el-button type="primary" size="small" @click="submit(list,true)"
                               v-if="list.collectionSituation==2 && $routeNav.getAuth('power-applyOnline')">申请资源上线
                    </el-button>
                </el-col>
            </el-row>
            <div class="text-center empty" v-if="!tableData||!tableData[0]">暂无数据</div>
        </div>
        <page :data="data" v-if="data" class="mt20 page" @jumpPage="getList"></page>
    </div>
</template>

<script>
    import page from '../../components/pagination'
    import qs from 'qs'

    export default {
        data() {
            return {
                resFilters: {
                    isOnline: {
                        id: 1
                    },
                    resType: {
                        id: 0
                    },
                    resLevel: {
                        id: 0
                    },
                    resPower: {
                        id: 0
                    },
                    resPowerDept: {
                        id: 0
                    },
                    resName: '',
                    OnlineList: [
                        {
                            label: '已归集',
                            value: '',
                            id: 1
                        },
                        {
                            label: '未归集',
                            value: '',
                            id: 2
                        }
                    ],
                    resTypeList: [
                        {
                            label: '服务接口类',
                            value: '',
                            id: 1
                        },
                        {
                            label: '服务页面类',
                            value: '',
                            id: 2
                        },
                        {
                            label: '数据交换类',
                            value: '',
                            id: 3
                        }
                    ],
                    resLevelList: [
                        {
                            label: '省级',
                            value: '',
                            id: 1
                        },
                        {
                            label: '市级',
                            value: '',
                            id: 2
                        },
                        {
                            label: '区级',
                            value: '',
                            id: 3
                        }
                    ],
                    resPowerList: [
                        {
                            label: '公开',
                            value: '',
                            id: 1
                        },
                        {
                            label: '受限',
                            value: '',
                            id: 2
                        }
                    ],
                    resPowerDeptList: []
                },
                index: 1,
                loading: false,
                tableData: [],
                data: {},
                showMore: false,
                more: false
            }
        },
        mounted() {
            if (this.$route.query.key) this.resFilters.resName = this.$route.query.key
            this.init()
        },
        methods: {
            init() {
                this.$http.get('/rdResourceDir/getDataInfo', {
                    isOnline: this.resFilters.isOnline.id,
                    resLevel: this.resFilters.resLevel.id || null,
                    resName: this.resFilters.resName,
                    resPower: this.resFilters.resPower.id || null,
                    resPowerDept: this.resFilters.resPowerDept.id || null,
                    resType: this.resFilters.resType.id || null
                }).then(result => {
                    if (result.data) {
                        this.resFilters.OnlineList[0].value = result.data.onLine
                        this.resFilters.OnlineList[1].value = result.data.offLine
                        this.resFilters.resPowerList[0].value = result.data.isPublic
                        this.resFilters.resPowerList[1].value = result.data.isPrivate
                        this.resFilters.resTypeList[0].value = result.data.serviceApiCount
                        this.resFilters.resTypeList[1].value = result.data.servicePageCount
                        this.resFilters.resTypeList[2].value = result.data.dataExchangeCount
                        this.resFilters.resLevelList[0].value = result.data.provinceCount
                        this.resFilters.resLevelList[1].value = result.data.cityCount
                        this.resFilters.resLevelList[2].value = result.data.areaCount
                        this.resFilters.resPowerDeptList = result.data.powerDeptInfos
                        this.getList()
                        this.$nextTick(() => {
                            this.setRem()
                        })
                    }
                })
            },
            setRem() {
                if (this.resFilters.resPowerDeptList[0]) {
                    if (this.$refs.resPowerDept.clientHeight > this.$refs.resPowerDept.childNodes[0].clientHeight) {
                        this.showMore = true
                        this.more = true
                    }
                }
            },
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/rdResourceDir/resDirPageList', {
                    current: this.index || 1,
                    size: 15,
                    isOnline: this.resFilters.isOnline.id,
                    resLevel: this.resFilters.resLevel.id || null,
                    resName: this.resFilters.resName,
                    resPower: this.resFilters.resPower.id || null,
                    resPowerDept: this.resFilters.resPowerDept.id || null,
                    resType: this.resFilters.resType.id || null
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.data = result.data
                        delete this.data['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            downLoad() {
                let api = window.localStorage.getItem('ajaxApi') || '/_api', obj = {
                    isOnline: this.resFilters.isOnline.id,
                    resLevel: this.resFilters.resLevel.id || null,
                    resName: this.resFilters.resName,
                    resPower: this.resFilters.resPower.id || null,
                    resPowerDept: this.resFilters.resPowerDept.id || null,
                    resType: this.resFilters.resType.id || null
                }
                window.open(location.origin + api + '/rdResourceDirData/downLoadResItem?' + qs.stringify(obj), '_blank')
            },
            filterActive(cur, item) {
                let id = Number(item.id) > -1 ? item.id : item
                if (cur && cur.id === id) return 'primary'
            },
            filterClick(cur, name, item, rest) {
                if (rest) {
                    cur[rest] = {}
                    cur[rest][name] = item
                } else {
                    cur[name] = {...item}
                }
                // this.init()
                this.getList(name === 'isOnline' ? 1 : null)
            },
            addCart(item) {
                this.$http.post('/rdResourceApplicationDetail/createNewApply', {
                    resId: item.id,
                    resName: item.resName,
                    resType: item.resType,
                    resSituation: 1 // 1 已归集 2 未归集
                }).then(result => {
                    if (result.success) {
                        this.$message.success({
                            message: result.data,
                            showClose: true
                        })
                    }
                })
            },
            submit(list, offLine) {
                this.$router.push({
                    path: '/res/submit',
                    query: {
                        idList: list.id,
                        offLine: offLine,
                        resType: list.resType,
                        collectionSituation: list.collectionSituation
                    }
                })
            }

        },
        components: {
            page
        },
        beforeRouteLeave(to, from, next) {
            if (to.name === 'resDetail') {
                from.meta.keepAlive = true
            } else {
                from.meta.keepAlive = false
            }
            next()
        }
    }
</script>

<style scoped lang="less">
    .res-filters {
        .item {
            margin-bottom: 5px;
            overflow: hidden;

            &:last-child {
                margin-bottom: 0;
            }

            .label {
                float: left;
                width: 130px;
                line-height: 30px;
                text-align: left;
                font-size: 14px;
                color: #999;
            }

            .content {
                margin-left: 130px;
                line-height: 30px;

                .el-link {
                    display: inline-block;
                    min-width: 100px;
                    margin-right: 10px;
                    font-size: 14px;
                    vertical-align: top;
                }

                .all {
                    float: left;
                    margin-right: 0;
                }

                .list {
                    margin-left: 80px;
                    padding-right: 70px;
                    position: relative;

                    .more {
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        min-width: 0;
                    }

                    &.simple {
                        height: 30px;
                        overflow: hidden;
                    }
                }
            }
        }
    }

    .list {
        padding: 0 30px;

        .empty {
            padding: 30px 0;
        }
    }
</style>
